<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top{
            width: 50px;
            height: 50px;
            background-color: rgb(0, 0,0,0.5);
            color: #FFF;
            text-align: center;
            position: fixed;
            right: 50px;
            top: 50%;
        }
    </style>
</head>
<body>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <div class="top">TOP</div>
    <script>
        // scroll 滚动条事件
        // window.pageYOffset window对象网页滚动后，当前网页的位置距离最上面的距离
        // scroll函数 window.scroll(x,y)  可以调整到滚动条位置
        window.addEventListener("scroll",function(){
            var top=window.pageYOffset;
            // console.log(top);
            
        })
        var topBar=document.querySelector(".top")
            topBar.onclick=function()
            {
                var topY=window.pageYOffset;
                topY-=300;   //设置一个指定位移距离
                if(topY<0) topY=0
                scrollBar(topY)
                // window.scroll(0,0)
            

            }
        function scrollBar(scrollPosition)
            {
                clearInterval(window.timerid)
                window.timerid=setInterval(function(){
                var top=window.pageYOffset;   //获取滚动条距最上面的距离
                var speed=(scrollPosition-top)/10   //计算缓动移动的位移
                speed=speed>0? Math.ceil(speed):Math.floor(speed);//取整，位移不出现小数
                console.log('top==>',top);
                console.log('speed==>',speed);
                window.scroll(0,top+speed); //滚动到指定位置
                if(top==scrollPosition)
                    {
                        clearInterval(window.timerid)
                    }
            },50)

        }
    
           
    </script>
    
</body>
</html>